<template>
	<view>
		<view class="titleBg">
			<view class="engTitle">THE TRACEABILITY ABOUT</view>
			<view class="engTitle">DIGITAL PIGEON</view>
			<view class="title">数字鸽业商品溯源</view>
		</view>
		<view>
			<view class="introduceText">扫码追溯 一步到位</view>
			<view>
				<u-row gutter="16">
					<u-col span="3">
						<view class="center">
							<view class="image">
								<img src="../../static/imgs/weizhi.png" alt="">
							</view>
							<view>原产地</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="center">
							<view class="image">
								<img src="../../static/imgs/shezhi.png" alt="">
							</view>
							<view>生产信息</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="center">
							<view class="image">
								<img src="../../static/imgs/4-06.png" alt="">
							</view>
							<view>检验信息</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="center">
							<view class="image">
								<img src="../../static/imgs/wuliu.png" alt="">
							</view>
							<view>物流信息</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<button @click="saoma" class="button">
			<img src="../../static/imgs/scan2.png" alt="">
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '状态1'
					}, 
					{
						name: '状态2'
					}, 
					{
						name: '状态3'
					}
				],
				current: 0
			}
		},
		methods: {
			saoma() {
				let that = this;
				 // 允许从相机和相册扫码
				 uni.scanCode({
					 success: function(res) {
						 console.log(res)
					 }
				 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.titleBg {
	height: 250rpx;
	background-color: #4882EE;
	padding: 0 30rpx;
	.engTitle {
		padding-top: 20rpx;
		color: white;
		opacity: 0.5;
		font-size: 40rpx;
	}
	.title {
		color: white;
		font-size: 55rpx;
		margin-top: 20rpx;
	}
}
.introduceText {
	height: 200rpx;
	line-height: 200rpx;
	text-align: center;
	font-size: 40rpx;
	color: #aaa;
}
.center {
	text-align: center;
}
.image {
	image {
		height: 80rpx;
		width: 80rpx;
	}
}
.button {
	width: 250rpx;
	height: 250rpx;
	line-height:250rpx;
	border-radius: 50%;
	border:none;
	background-image: linear-gradient(#5286E8, #2A60C5);
	// background-color: #4882EE;
	margin-top: 40rpx;
	color: white;
	box-shadow: 0 5px 5px #888888;
	image {
		width: 125rpx;
		height: 125rpx;
		margin-top: 60rpx;
	}
}
</style>
